import React, {Component} from 'react';
import {
    Animated,
    View,
    StyleSheet,
    Text
} from 'react-native';

import RippleButton from '../widget/btn/RippleButton';

export default class PageAnimate extends Component {

    constructor(props) {
        super(props);
        this.state = {
            anim: [1, 2, 3].map(() => new Animated.Value(0)) // 初始化3个值
        };
    }

    _show() {
        let timing = Animated.timing;

        // 依次执行
        Animated.sequence(
            [
                // 三个view滚到右边再还原(共2组，6个动作)，[每个动作]间隔200ms
                Animated.stagger(
                    1000,
                    this.state.anim.map((left) => {
                        return timing(left, {
                            toValue: 1,
                        });
                    }).concat(
                        this.state.anim.map((left) => {
                            return timing(left, {
                                toValue: 0,
                            });
                        })
                    )
                ),

                Animated.delay(1000), // 延迟400ms，配合sequence使用

                timing(this.state.anim[0], {
                    toValue: 1
                }),

                timing(this.state.anim[1], {
                    toValue: -1
                }),

                timing(this.state.anim[2], {
                    toValue: 0.5
                }),

                Animated.delay(1000),

                // 同时执行(同时回到原位置)
                Animated.parallel(this.state.anim.map((anim) => {
                    return timing(anim, {
                        toValue: 0,
                    });
                })) // 同时回到原位置
            ]
        ).start();
    }

    render() {
        let views = this.state.anim.map(function (value, i) {
            return (
                <Animated.View
                    key={i}
                    style={[styles.demo, {
                        left: value.interpolate({
                            inputRange: [0, 1],
                            outputRange: [0, 200]
                        })
                    }]}>

                    <Text style={styles.text}>View{i + 1}</Text>
                </Animated.View>
            );
        });
        return <View>
            {views}
            <RippleButton styleText={styles.btnStart} text="开始" onPress={() => {
                this._show()
            }}/>
        </View>;
    }
}

const styles = StyleSheet.create({
    demo: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#0da5ea',
    },
    text: {
        fontSize: 30
    },
    btnStart: {
        fontSize: 25,
        margin: 40,
        height: 30,
    }
});
